<template>
  <div class="interface-manage-page pd16">
    <el-row :gutter="16" class="flex-block">
      <el-col :span="6">
        <el-card class="box-card sp-card">
          <div class="btn">
            <el-button type="primary" @click="addInterface">新增接口</el-button>
          </div>
          <div class="tree-block">
            <el-tree
              ref="treeRef"
              class="nr-tree"
              :data="treeData"
              :expand-on-click-node="false"
              show-checkbox
              default-expand-all
              node-key="id"
              highlight-current
              :props="defaultProps"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card api-block">
          <div class="title">
            <span>{{interfaceInfo[0].label}}</span>
            <span class="name">{{interfaceInfo[0].name}}</span>
            <span class="btn-group">
              <el-button type="primary" @click="handleEdit">编辑</el-button>
              <el-button type="danger" @click="handleDelete">删除</el-button>
            </span>
          </div>
          <div class="info mt16">
            <el-table border  :data="interfaceInfo" class="nr-table">
              <el-table-column label="接口类型" prop="method" align="center"></el-table-column>
              <el-table-column label="接口地址" prop="address" align="center"></el-table-column>
              <el-table-column label="请求数据类型" prop="reqDataType" align="center"></el-table-column>
              <el-table-column label="响应数据类型" prop="resDataType" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="demo mt16">
            <div class="block-label">请求示例</div>
            <el-input
              v-model="queryStr"
              :rows="10"
              type="textarea"
              readonly
              class="mt16"
            />
          </div>
          <div class="req mt16">
            <div class="block-label">请求参数</div>
            <el-table border  :data="reqParams" class="nr-table mt16">
              <el-table-column label="字段" prop="param" align="center"></el-table-column>
              <el-table-column label="类型" prop="type" align="center"></el-table-column>
              <el-table-column label="说明" prop="info" align="center"></el-table-column>
              <el-table-column label="备注" prop="remark" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="res mt16">
            <div class="block-label">响应</div>
            <el-table border  :data="resData" class="nr-table mt16">
              <el-table-column label="字段" prop="param" align="center"></el-table-column>
              <el-table-column label="类型" prop="type" align="center"></el-table-column>
              <el-table-column label="说明" prop="info" align="center"></el-table-column>
              <el-table-column label="备注" prop="remark" align="center"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <interface-modify-form
      :dialogVisible="modifyFormVis"
      :formStatus="modifyFormStatus"
      :formData="interfaceFormData.data"
      @update:dialogVisible="(value: boolean) => modifyFormVis = value"
      @submit="getInterfaceData">
    </interface-modify-form>
  </div>
</template>

<script setup lang="ts" name="InterfaceManage">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import InterfaceModifyForm from './interface-modify-form.vue'

const defaultProps = {
  children: 'children',
  label: 'label',
}
const treeData = ref<any>([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])
const interfaceInfo = ref<any>([
  {
    label: '新增用户接口',
    name: 'r6s_di_conf',
    method: 'POST',
    address: '/admin-api/system/user/create',
    reqDataType: 'json',
    resDataType: '[ "*/*" ]'
  }
])
const queryStr = ref(`
{
  "username": "yudao"
}
`)
const reqParams = ref<any>([
  { param: '11', type: 'String', info: '11', remark: '22' }
])
const resData = ref<any>([
  { param: '11', type: 'String', info: '11', remark: '22' }
])
const currentInterface = reactive({
  name: '1'
})
const modifyFormVis = ref(false)
const modifyFormStatus = ref(0)
const interfaceFormData = ref({
  data: {}
})

// 新增
const addInterface = () => {
  modifyFormVis.value = true
  modifyFormStatus.value = 0
}

// 编辑
const handleEdit = () => {
  modifyFormVis.value = true
  modifyFormStatus.value = 1
  interfaceFormData.value.data = Object.assign({}, currentInterface)
}

// 删除
const handleDelete = () => {
  ElMessageBox.confirm(
    `确定要删除【${currentInterface.name}】此接口吗？`,
    '系统提示',
    {
      type: 'warning',
    }
  )
  .then(() => {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
    
  })
  .catch(() => {})
}

// 获取接口列表数据
const getInterfaceData = () => {}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.interface-manage-page
  height 100%
  .tree-block
    position absolute
    top 60px
    bottom 0px
    left 0px
    right 0px
    overflow-y auto
    padding 0 20px 
  .api-block
    .title
      font-weight bold
      font-size 24px
      .name
        margin-left 16px
        font-size 18px
      .btn-group
        display inline-block
        vertical-align bottom
        margin-left 16px
  .block-label
    font-size 14px
</style>
